<template>
  <div>
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item label="设备编号：">
        <el-input v-model="message" placeholder="请输入">
          <template #suffix>
            <i
              class="el-icon-circle-close"
              v-if="message"
              @click="message = ''"
            ></i>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          @click="onSearch"
          icon="el-icon-search"
          size="small"
          >查询</el-button
        >
      </el-form-item>
    </el-form>
    <div class="bottom">
      <div class="btns">
        <el-button
          icon="el-icon-circle-plus-outline"
          size="small"
          class="create"
          @click="addVm"
        >
          新建
        </el-button>
        <el-button size="small" class="edit" @click="selectCounts">
          批量操作
        </el-button>
      </div>
      <el-table
        :data="vendingList"
        highlight-current-row
        @selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column
          type="index"
          label="序号"
          width="80"
          :index="getIndex"
        ></el-table-column>
        <el-table-column
          prop="innerCode"
          label="设备编号"
          width="280"
        ></el-table-column>
        <el-table-column
          prop="type.name"
          label="设备型号"
          width="280"
        ></el-table-column>
        <el-table-column
          prop="node.name"
          label="详细地址"
          width="280"
        ></el-table-column>
        <el-table-column
          prop="ownerName"
          label="合作商"
          width="280"
        ></el-table-column>
        <el-table-column prop="vmStatus" label="设备状态"></el-table-column>
        <el-table-column label="操作" width="150">
          <template #default="scope">
            <el-button type="text" @click="getChannelList(scope.row)"
              >货道</el-button
            >
            <el-button type="text" @click="selectPolicy(scope.row.innerCode)"
              >策略</el-button
            >
            <el-button type="text" @click="editPolicy(scope.row)"
              >修改</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <div class="footer" v-if="flag">
        <p>
          <span>共{{ totalCount }}条记录</span>
          <i>第{{ params.pageIndex }}/{{ totalPage }}页</i>
        </p>
        <div class="footer-btns">
          <el-button
            size="mini"
            @click="prePage()"
            :disabled="params.pageIndex === 1"
            :class="{ disbale: params.pageIndex == 1 }"
            >上一页</el-button
          >
          <el-button
            size="mini"
            @click="nextPage()"
            :disabled="params.pageIndex == totalPage"
            :class="{ disbale: params.pageIndex == totalPage }"
            >下一页</el-button
          >
        </div>
      </div>
    </div>
    <!-- 新增设备 -->
    <el-dialog
      title="新增设备"
      :visible.sync="addDialog"
      custom-class="add-dialog"
      @close="addclose"
    >
      <el-form
        :model="addForm"
        label-width="140px"
        class="addForm"
        :rules="rules"
        ref="addForm"
      >
        <el-form-item label="设备编号：">系统自动生成</el-form-item>
        <el-form-item label="选择型号：" prop="vmType">
          <el-select v-model="addForm.vmType" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.typeId"
              :label="item.name"
              :value="item.typeId"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="选择点位" prop="nodeId">
          <el-select v-model="addForm.nodeId" placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addDialog = false">取 消</el-button>
        <el-button type="primary" @click="addConfirm">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 批量策略管理 -->
    <el-dialog
      title="批量策略管理"
      :visible.sync="selectDialog"
      custom-class="select-dialog add-dialog"
      v-if="!celue.discount"
    >
      <el-form :model="selectForm" label-width="140px" class="selectForm">
        <el-form-item label="选择策略：" id="select-item">
          <el-select v-model="selectForm.policyId" placeholder="请选择">
            <el-option
              v-for="item in selectOptions"
              :key="item.policyId"
              :label="item.policyName"
              :value="item.policyId"
            >
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="selectDialog = false">取 消</el-button>
        <el-button type="primary" @click="policyConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 取消策略 -->
    <el-dialog
      title="策略管理"
      :visible.sync="selectDialog"
      custom-class="select-dialog add-dialog cancel-dialog"
      v-else
    >
      <el-form class="cancel-policy">
        <el-row>
          <el-col :span="12">
            <span>机器编号：</span>
            <i>{{ celue.innerCode }}</i>
          </el-col>
          <el-col :span="12">
            <span>策略名称：</span>
            <i>{{ celue.policyName }}</i>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <span>策略方案：</span>
            <i>{{ celue.discount }}%</i>
          </el-col>
        </el-row>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="cancelPolicy">取消策略</el-button>
      </span>
    </el-dialog>
    <!-- 修改设备 -->
    <el-dialog
      title="修改设备"
      :visible.sync="editDialog"
      custom-class="add-dialog edit-dialog"
    >
      <el-form label-width="140px" :model="editForm">
        <el-form-item label="机器编号：">{{ editList.innerCode }}</el-form-item>
        <el-form-item label="供货时间：">{{
          editList.lastSupplyTime
        }}</el-form-item>
        <el-form-item label="设备类型：">{{ type.name }}</el-form-item>
        <el-form-item label="设备容量：">{{
          type.channelMaxCapacity
        }}</el-form-item>
        <el-form-item label="设备点位：">
          <el-select v-model="editForm.nodeId" placeholder="请选择">
            <el-option
              v-for="item in editOptions"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="合作商：">{{ editList.ownerName }}</el-form-item>
        <el-form-item label="所属区域：">{{ region.name }}</el-form-item>
        <el-form-item label="设备地址：">{{ node.name }}</el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="editDialog = false">取 消</el-button>
        <el-button type="primary" @click="editConfirm">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 货道 -->
    <el-dialog
      title="货道设置"
      width="940px"
      :visible.sync="outerVisible"
      custom-class="outer-dialog"
      @close="channelClose"
    >
      <button
        @click="tfLeft"
        ref="leftBtn"
        :disabled="leftBtn"
        v-if="drinkList.length > 10"
      >
        <i class="el-icon-arrow-left left-jt jt"></i>
      </button>
      <button
        @click="tfRight"
        ref="rightBtn"
        :disabled="rightBtn"
        v-if="drinkList.length > 10"
      >
        <i class="el-icon-arrow-right right-jt jt"></i>
      </button>
      <div class="channel-dialog-wrapper">
        <div class="channel-basic">
          <span class="vm-row">货道行数：{{ typeDetail.vmRow }}</span
          ><span class="vm-col">货道列数：{{ typeDetail.vmCol }}</span
          ><span class="channel-max-capacity"
            >货道容量（个）：{{ typeDetail.channelMaxCapacity }}</span
          >
          <el-button class="innerdialog-btn" @click="intelligent"
            >智能排货</el-button
          >
        </div>
        <!-- 滚动条 -->
        <div class="scrollbar">
          <ul ref="transformJt" :style="{ width: width }">
            <li v-for="(item, index) in drinkList" :key="item.channelId">
              <div class="drink">
                <div class="pic">
                  <div class="code">{{ item.channelCode }}</div>
                  <img
                    :src="
                      item.skuImage
                        ? item.skuImage
                        : ''
                    "
                    alt=""
                    ref="drinkImg"
                  />
                  <h4 ref="drinkH4">
                    {{ item.skuName ? item.skuName : '暂无商品' }}
                  </h4>
                </div>
                <div class="btns">
                  <el-button class="add" type="text" @click="addDrink(index)"
                    >添加</el-button
                  >
                  <el-button
                    type="text"
                    class="remove"
                    @click="delDrink(index)"
                    ref="delDrinkBtn"
                  >
                    删除
                  </el-button>
                </div>
              </div>
            </li>
          </ul>
        </div>
      </div>
      <!-- 内层增加商品dialog -->
      <el-dialog
        width="858px"
        title="选择商品"
        :visible.sync="innerVisible"
        append-to-body
        custom-class="inner-dialog"
        @close="resetAddDrinks"
      >
        <button
          ref="innerLeftBtn"
          :disabled="innerLeftBtn"
          @click="preDrinks"
          v-if="drinkTotalPage > 1"
        >
          <i class="el-icon-arrow-left left-jt jt"></i>
        </button>
        <button
          ref="innerRightBtn"
          :disabled="innerRightBtn"
          @click="nextDrinks"
          v-if="drinkTotalPage > 1"
        >
          <i class="el-icon-arrow-right right-jt jt" ref="yjt"></i>
        </button>
        <div class="add-drink-dialog-wrapper">
          <el-form :inline="true" class="demo-form-inline">
            <el-form-item label="商品名称：">
              <el-input
                v-model="drinkSkuName"
                placeholder="请输入"
                clearable
                @input="drinkSearch"
              ></el-input>
              <template #suffix>
                <i
                  class="el-icon-circle-close"
                  v-if="drinkSelectForm.skuName"
                  @click="drinkSelectForm.skuName = ''"
                ></i>
              </template>
            </el-form-item>
            <el-form-item>
              <el-button
                type="primary"
                @click="drinkSearch"
                icon="el-icon-search"
                size="small"
                >查询</el-button
              >
            </el-form-item>
          </el-form>
          <div class="add-drinkList">
            <div
              class="add-drink-item"
              v-for="(item, index) in addDrinkList"
              :key="item.skuId"
            >
              <div class="drink-content" @click="drinkTrueConfirm(index)">
                <div class="drinkTrue" ref="drinkTrue" style="display: none">
                  <img
                    src=""
                    alt=""
                  />
                </div>
                <div class="pic">
                  <img :src="item.skuImage" alt="" ref="innerImg" />
                </div>
                <h4 ref="innerH4">{{ item.skuName }}</h4>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="addDrinksConfirm" :disabled="innerAddBtn"
            >确认</el-button
          >
        </div>
      </el-dialog>
      <!-- 内层采纳商品dialog -->
      <el-dialog
        width="858px"
        title="智能排货"
        :visible.sync="znVisible"
        append-to-body
        custom-class="inner-dialog"
      >
        <div class="zn-dialogBox">
          <div class="tips">
            该区域属于{{ businessType }}商圈适合销售一下商品：
          </div>
          <div class="add-drink-dialog-wrapper">
            <div class="add-drinkList">
              <div
                class="add-drink-item"
                v-for="item in top10DrinksList"
                :key="item.skuId"
              >
                <div class="drink-content">
                  <div class="pic">
                    <img :src="item.image" alt="" />
                  </div>
                  <h4>{{ item.skuName }}</h4>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div slot="footer" class="dialog-footer">
          <el-button @click="adviseDrinks" style="padding: 0"
            >采纳建议</el-button
          >
        </div>
      </el-dialog>
      <div slot="footer" class="dialog-footer">
        <el-button @click="sendChannelConfig">确认</el-button>
        <!-- <el-button type="primary" @click="innerVisible = true"
          >打开内层 Dialog</el-button
        > -->
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getVendingList,
  getVmTypeSelect,
  getVmNodeSelect,
  addEquipment,
  selectPolicy,
  applyPolicy,
  getVmPolicy,
  cancelPolicy,
  changeNode,
  getTypeDetail,
  getChannelList,
  getDrinklList,
  getTop10Drinks,
  getBusinessType,
  getChannelConfig
} from '@/api/device'
export default {
  name: 'devicemanage-page',
  components: {},
  props: {},
  data() {
    return {
      width: '',
      message: '',
      selectTitle: '',
      addDialog: false,
      selectDialog: false,
      editDialog: false,
      outerVisible: false,
      innerVisible: false,
      znVisible: false,
      leftBtn: true,
      rightBtn: false,
      innerAddBtn: true,
      innerLeftBtn: true,
      innerRightBtn: false,
      multipleSelection: [],
      vendingList: [],
      drinkList: [],
      addDrinkList: [],
      top10DrinksList: [],
      row: [],
      businessType: '',
      imgUrl: '',
      h4Url: '',
      skuIdUrl: '',
      imgLocation: '',
      h4Location: '',
      skuIdLocation: '',
      params: {
        pageIndex: 1,
        pageSize: 10,
        innerCode: ''
      },
      params2: {
        pageIndex: 1,
        pageSize: 100000,
        name: ''
      },
      params3: {
        pageIndex: 1,
        pageSize: 100000,
        name: '',
        regionId: ''
      },
      drinkParams: {
        pageIndex: 1,
        pageSize: 10
      },
      channelConfig: {
        innerCode: '',
        channelList: []
      },
      selectForm: {
        innerCodeList: [],
        policyId: ''
      },
      editForm: {
        nodeId: ''
      },
      drinkSkuName: '',
      celue: {},
      editList: {},
      type: {},
      region: {},
      node: {},
      typeDetail: {},
      totalCount: null,
      totalPage: null,
      drinkTotalPage: null,
      addForm: {
        createUserId: 1,
        nodeId: '',
        vmType: ''
      },
      rules: {
        vmType: [{ required: true, message: '请输入', trigger: 'blur' }],
        nodeId: [{ required: true, message: '请输入', trigger: 'blur' }]
      },
      options1: [],
      options2: [],
      selectOptions: [],
      editOptions: [],
      flag: true,
      value: ''
    }
  },
  computed: {},
  watch: {},
  created() {
    // 列表渲染
    this.getVendingList()
  },
  methods: {
    // 列表渲染函数
    async getVendingList() {
      this.params.innerCode = ''
      const res = await getVendingList(this.params)
      // console.log(res)
      res.currentPageRecords.forEach((item) => {
        if (item.vmStatus === 1) {
          item.vmStatus = '运营'
        } else if (item.vmStatus === 0) {
          item.vmStatus = '未投放'
        } else if (item.vmStatus === 3) {
          item.vmStatus = '撤机'
        }
      })
      this.vendingList = res.currentPageRecords
      // console.log(this.vendingList)
      this.totalCount = res.totalCount
      this.totalPage = res.totalPage
    },
    getIndex(index) {
      return (this.params.pageIndex - 1) * this.params.pageSize + index + 1
    },
    // 上一页
    prePage() {
      this.params.pageIndex--
      this.getVendingList()
    },
    // 下一页
    nextPage() {
      this.params.pageIndex++
      this.getVendingList()
    },
    // 搜索
    async onSearch() {
      if (this.message === '') {
        this.flag = true
        return this.getVendingList()
      } else {
        this.flag = false
        this.params.innerCode = this.message
        const res = await getVendingList(this.params)
        res.currentPageRecords.forEach((item) => {
          if (item.vmStatus === 1) {
            item.vmStatus = '运营'
          } else if (item.vmStatus === 0) {
            item.vmStatus = '未投放'
          } else if (item.vmStatus === 3) {
            item.vmStatus = '撤机'
          }
        })
        this.vendingList = res.currentPageRecords
      }
    },
    // 新建
    async addVm() {
      const res = await getVmTypeSelect(this.params2)
      // console.log(res)
      this.options1 = res.currentPageRecords
      const res2 = await getVmNodeSelect(this.params3)
      // console.log(res2)
      this.options2 = res2.currentPageRecords
      this.addDialog = true
    },
    // 关闭新增dialog
    addclose() {
      this.$refs.addForm.resetFields()
    },
    // 新增确定
    async addConfirm() {
      try {
        await this.$refs.addForm.validate()
        console.log(this.addForm)
        await addEquipment(this.addForm)
        this.getVendingList()
        // this.addDialog = false
      } catch (error) {
        console.log(error)
      }
    },
    // 点击批量操作
    async selectCounts() {
      console.log(this.selectForm.innerCodeList)
      if (this.multipleSelection.length === 0) {
        return this.$message({
          message: '请勾选售货机',
          type: 'warning'
        })
      }
      const res = await selectPolicy()
      // console.log(res)
      this.selectOptions = res
      this.multipleSelection.forEach((item) => {
        this.selectForm.innerCodeList.push(item.innerCode)
      })
      this.selectDialog = true
    },
    // 多选自动放数组里
    handleSelectionChange(val) {
      this.multipleSelection = val
      // console.log(val)
    },
    // 策略选择
    async selectPolicy(id) {
      // console.log(id)
      // 点击策略发送查询策略请求，看有么有策略如果没有，显示策略选择，有则显示取消策略
      const celue = await getVmPolicy(id)
      // console.log(celue)
      if (!celue) {
        const { data: res } = await selectPolicy()
        this.selectOptions = res
        this.selectForm.innerCodeList.push(id)
      } else {
        this.celue = celue
      }
      this.selectDialog = true
    },
    // 策略确定
    async policyConfirm() {
      // console.log(this.selectForm)
      await applyPolicy(this.selectForm)
      this.selectDialog = false
    },
    // 取消策略
    async cancelPolicy() {
      await cancelPolicy(this.celue.innerCode, this.celue.policyId)
      this.celue = {}
      this.selectDialog = false
      this.getVendingList()
    },
    // 修改策略
    async editPolicy(row) {
      const res = await getVmNodeSelect(this.params3)
      this.editOptions = res.currentPageRecords
      // console.log(row)
      row.lastSupplyTime = row.lastSupplyTime
        .split('-')
        .join('.')
        .split('T')
        .join(' ')
      this.editList = row
      // console.log(this.editList)
      // console.log(this.editList.type.name)
      this.type = this.editList.type
      this.region = this.editList.region
      this.node = this.editList.node
      console.log(this.editOptions)
      const obj = this.editOptions.find((item) => item.name === this.node.name)
      console.log(obj)
      this.editForm.nodeId = obj.id
      this.editDialog = true
    },
    // 确定策略
    async editConfirm() {
      try {
        await changeNode(this.editList.id, this.editForm.nodeId)
        this.editDialog = false
        this.getVendingList()
      } catch (error) {
        if (error.response?.data) {
          this.$message.error(error.response.data)
        }
      }
    },
    // 点击货道
    async getChannelList(row) {
      this.row = row
      const res = await getTypeDetail(row.vmType)
      // console.log(res)
      this.typeDetail = res
      const res1 = await getChannelList(row.innerCode)
      res1.forEach((item) => {
        for (const key in item.sku) {
          item[key] = item.sku[key]
        }
      })
      this.drinkList = res1
      console.log('huodao', this.drinkList)
      this.outerVisible = true
      if (this.drinkList.length <= 10) {
        this.width = '830px'
      } else {
        this.width = '1660px'
      }
    },
    // 关闭货道把数据清空
    channelClose() {
      this.drinkList = []
    },
    // 点击右箭头平移
    tfRight() {
      this.$refs.transformJt.style.transform = 'translateX(-830px)'
      this.$refs.transformJt.style.transition = 'all 0.5s'
      this.leftBtn = false
      this.rightBtn = true
    },
    // 点击左箭头平移
    tfLeft() {
      this.$refs.transformJt.style.transform = 'translateX(0px)'
      this.$refs.transformJt.style.transition = 'all 0.5s'
      this.leftBtn = true
      this.rightBtn = false
    },
    // 饮料删除
    delDrink(index) {
      console.log(this.$refs.drinkImg[index])
      this.$refs.drinkImg[index].src =
        ''
      this.$refs.drinkH4[index].innerText = '暂无商品'
      this.drinkList[index].skuId = '0'
    },
    // 饮料增加
    async addDrink(index) {
      this.drinkParams = {
        pageIndex: 1,
        pageSize: 10
      }
      const res = await getDrinklList(this.drinkParams)
      this.addDrinkList = res.currentPageRecords
      this.drinkTotalPage = res.totalPage
      this.imgLocation = this.$refs.drinkImg[index]
      this.h4Location = this.$refs.drinkH4[index]
      this.skuIdLocation = this.drinkList[index]
      // console.log(this.skuIdLocation)
      this.innerVisible = true
    },
    // 上一页
    async preDrinks() {
      if (this.drinkParams.pageIndex > 1) {
        this.drinkParams.pageIndex--
        // console.log(this.drinkParams)
        const res = await getDrinklList(this.drinkParams)
        console.log(res)
        this.addDrinkList = res.currentPageRecords
        this.innerRightBtn = false
        if (this.drinkParams.pageIndex === 1) {
          this.innerLeftBtn = true
        }
      }
    },
    // 下一页饮料
    async nextDrinks() {
      if (this.drinkParams.pageIndex < this.drinkTotalPage) {
        this.drinkParams.pageIndex++
        console.log(this.drinkParams)
        const res = await getDrinklList(this.drinkParams)
        console.log(res)
        this.addDrinkList = res.currentPageRecords
        this.innerLeftBtn = false
        if (this.drinkParams.pageIndex === +this.drinkTotalPage) {
          this.innerRightBtn = true
        }
      }
    },
    // 添加饮料图片
    drinkTrueConfirm(index) {
      this.skuIdUrl = this.addDrinkList[index].skuId
      // console.log(this.skuIdUrl)
      // 排他思想
      this.$refs.drinkTrue.forEach((item) => {
        item.style.display = 'none'
      })
      this.$refs.drinkTrue[index].style.display = 'block'
      this.innerAddBtn = false
      this.imgUrl = this.$refs.innerImg[index].src
      this.h4Url = this.$refs.innerH4[index].innerText
    },
    // 关闭增加饮料dialog对增加饮料图片进行重置
    resetAddDrinks() {
      this.$refs.drinkTrue.forEach((item) => {
        item.style.display = 'none'
      })
      this.drinkSkuName = ''
    },
    // 查询饮料
    async drinkSearch() {
      this.drinkParams.skuName = this.drinkSkuName
      const res = await getDrinklList(this.drinkParams)
      if (res.totalPage < 2) {
        this.drinkParams.pageIndex = 1
        const res1 = await getDrinklList(this.drinkParams)
        this.addDrinkList = res1.currentPageRecords
        this.drinkTotalPage = res1.totalPage
      }
      this.addDrinkList = res.currentPageRecords
      this.drinkTotalPage = res.totalPage
      console.log(res)
    },
    // 添加饮料确定按钮
    addDrinksConfirm() {
      this.imgLocation.src = this.imgUrl
      this.h4Location.innerText = this.h4Url
      this.skuIdLocation.skuId = this.skuIdUrl
      this.innerVisible = false
    },
    // 点击智能排货  获取销量前10 的商品和商圈列表
    async intelligent() {
      console.log(this.row)
      const res = await getTop10Drinks(this.row.businessId)
      console.log('智能排货', res)
      this.top10DrinksList = res
      const res1 = await getBusinessType(this.row.businessId)
      // console.log(res1)
      this.businessType = res1
      this.znVisible = true
    },
    // 点击采纳建议
    adviseDrinks() {
      // console.log(this.top10DrinksList)
      // 修改数据
      this.drinkList
        .slice(0, this.top10DrinksList.length)
        .forEach((item, index) => {
          item.skuName = this.top10DrinksList[index].skuName
          // console.log(this.top10DrinksList[1].skuNname)
          item.imgurl = this.top10DrinksList[index].image
          item.skuId = this.top10DrinksList[index].skuId
        })
      // console.log(this.$refs.drinkImg[0])
      // console.log(this.top10DrinksList[0].image)
      // 点击采纳建议把增加商品的图片赋值给饮料列表
      this.$refs.drinkImg
        .slice(0, this.top10DrinksList.length)
        .forEach((item, index) => {
          item.src = this.top10DrinksList[index].image
        })
      // 点击采纳建议把增加商品的文字赋值给饮料列表
      this.$refs.drinkH4
        .slice(0, this.top10DrinksList.length)
        .forEach((item, index) => {
          item.innerText = this.top10DrinksList[index].skuName
        })
      console.log(this.drinkList)
      this.znVisible = false
    },
    // 货道确认
    async sendChannelConfig() {
      // console.log(this.drinkList)
      this.channelConfig.innerCode = this.drinkList[0].innerCode
      this.drinkList.forEach((item) => {
        const obj = {}
        obj.channelCode = item.channelCode
        obj.skuId = item.skuId
        this.channelConfig.channelList.push(obj)
      })
      console.log(this.channelConfig)
      const res = await getChannelConfig(this.channelConfig)
      console.log(res)
      this.outerVisible = false
    }
  }
}
</script>

<style scoped lang="scss">
.demo-form-inline {
  background-color: #fff;
  height: 64px;
  display: flex;
  align-items: center;
  margin-bottom: 20px;
  .el-form-item {
    padding-left: 15px;
    margin-top: 22px;
    ::v-deep .el-input__inner {
      width: 206px;
      padding: 0 30px 0 15px;
      height: 36px;
    }
  }
  .el-form-item:nth-child(2) {
    padding-left: 0;
  }
  .el-button {
    height: 36px;
    width: 80px;
    border-radius: 5px;
  }
}
.bottom {
  padding: 20px 15px 19px 17px;
  background-color: #fff;
  ::v-deep .el-table .has-gutter tr th {
    background-color: #f3f6fb !important;
    border-bottom: 0 !important;
    padding: 10px 0;
    color: #666;
    font-weight: normal;
  }
  ::v-deep .el-table .has-gutter tr th:first-child {
    border-radius: 5px 0 0 5px;
  }
  ::v-deep .el-table .has-gutter tr th:nth-child(8) {
    border-radius: 0 5px 5px 0;
  }
  ::v-deep .el-table th.el-table__cell:nth-child(1) > .cell {
    padding-left: 14px;
  }
  ::v-deep .el-table__cell {
    padding: 3px 0;
    border-bottom: 0;
    .el-button {
      color: #5f84ff;
    }
  }
  .btns {
    margin-bottom: 20px;
    .el-button {
      font-size: 14px;
      height: 36px;
      border: 0;
      border-radius: 5px;
    }
    .create {
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      color: #fff;
    }
    .edit {
      background: #fbf4f0 !important;
    }
  }
  .footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 32px 16px;
    p {
      font-size: 16px;
      line-height: 28px;
      color: #dbdfe5;
    }
    .el-button {
      margin: 0 10px;
      background-color: #d5ddf8;
      height: 32px;
      color: #606266;
    }
  }
}
::v-deep .add-dialog {
  width: 630px;
  border-radius: 10px;
  .el-dialog__title {
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
  }
  .el-dialog__body {
    padding: 20px 20px 30px;
  }
  .addForm {
    height: 148px;
    .el-form-item__label,
    .el-form-item__content {
      line-height: 36px;
    }
    .el-input__inner {
      height: 36px;
    }
    .el-select {
      width: 400px;
    }
  }
  .el-dialog__footer {
    padding: 0 20px 40px;
    text-align: center;
    .el-button + .el-button {
      margin-left: 34px;
    }
    .el-button {
      width: 80px;
      height: 36px;
      border-radius: 5px;
      border: 0;
      padding: 0;
      &:nth-child(1) {
        background-color: #fbf4f0;
      }
      &:nth-child(2) {
        background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      }
    }
  }
}
.disbale {
  background-color: #edf0f9 !important;
  color: #d8dde3 !important;
}
.el-icon-circle-close {
  margin-right: 5px;
  color: #dfe4e7;
}
.el-icon-circle-close:hover {
  color: #7f7270;
  cursor: pointer;
}
//批量操作弹出框
::v-deep .select-dialog {
  .el-dialog__body {
    height: 86px;
  }
  .selectForm {
    #select-item {
      .el-form-item__label,
      .el-form-item__content {
        height: 36px;
      }
      .el-input__inner {
        position: relative;
        bottom: 2px;
        width: 396px;
        height: 36px;
      }
    }
  }
}
//策略管理（取消）
::v-deep .cancel-dialog {
  .el-dialog__body {
    height: 122px;
  }
  .el-row {
    height: 36px;
    line-height: 36px;
    font-size: 14px;
    color: #666;
    span {
      float: left;
      width: 140px;
      text-align: right;
      padding-right: 12px;
    }
  }
  .dialog-footer {
    text-align: left;
  }
}
//修改
::v-deep .edit-dialog {
  .el-form {
    height: 428px;
    .el-form-item {
      margin-bottom: 20px;
    }
  }
  .el-form-item__label,
  .el-form-item__content {
    height: 36px;
  }
  .el-input__inner {
    position: relative;
    bottom: 2px;
    width: 396px;
    height: 36px;
  }
}
//货道(外层dialog)
::v-deep .outer-dialog {
  position: relative;
  border-radius: 10px;
  .jt {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
  }
  .left-jt {
    left: 0;
  }
  .right-jt {
    right: 0;
  }
  .el-dialog__title {
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
  }
  .el-dialog__body {
    padding: 20px 20px 30px;
    .channel-dialog-wrapper {
      width: 847px;
      margin: 0 auto;
      overflow: hidden;
      .channel-basic {
        display: flex;
        margin: 0 auto;
        align-items: center;
        width: 100%;
        height: 56px;
        margin-bottom: 16px;
        background: #f3f6fb;
        .vm-row {
          margin-left: 43px;
          line-height: 16px;
        }
        .vm-col {
          margin-left: 55px;
          line-height: 16px;
        }
        .channel-max-capacity {
          margin-left: 54px;
          line-height: 16px;
          flex: 1;
        }
        .innerdialog-btn {
          width: 80px;
          height: 36px;
          padding: 0;
          margin-right: 22px;
          text-align: center;
          background: #5f84ff !important;
          color: #fff;
        }
      }
      .scrollbar {
        width: 830px;
        margin: 0 auto;
        height: 384px;
        overflow: auto;
        overflow-x: hidden;
        // 滚动条整体部分
        &::-webkit-scrollbar {
          width: 6px;
          height: 6px;
        }
        // 滚动条的轨道的两端按钮，允许通过点击微调小方块的位置。
        &::-webkit-scrollbar-button {
          display: none;
        }
        // 滚动条的轨道（里面装有Thumb）
        &::-webkit-scrollbar-track {
          background: transparent;
        }
        // 滚动条的轨道（里面装有Thumb）
        &::-webkit-scrollbar-track-piece {
          background-color: transparent;
        }
        // 滚动条里面的小方块，能向上向下移动（或往左往右移动，取决于是垂直滚动条还是水平滚动条）
        &::-webkit-scrollbar-thumb {
          background: rgba(144, 147, 153, 0.3);
          cursor: pointer;
          border-radius: 4px;
        }
        // 边角，即两个滚动条的交汇处
        &::-webkit-scrollbar-corner {
          display: none;
        }
        // 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件
        &::-webkit-resizer {
          display: none;
        }
      }
      ul {
        width: 1660px;
        display: flex;
        flex-wrap: wrap;
        li {
          width: 166px;
          height: 180px;
          padding: 0 8px;
          margin-bottom: 20px;
          .drink {
            height: 180px;
            position: relative;
            background-color: #fff;
            border-radius: 4px;
            -webkit-box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
            .code {
              position: absolute;
              top: 10px;
              left: 0;
              width: 43px;
              height: 23px;
              line-height: 23px;
              background: #829bed;
              border-radius: 0 10px 10px 0;
              font-size: 12px;
              color: #fff;
            }
            .pic {
              height: 135px;
              padding-top: 16px;
              background-color: #f6f7fb;
              border-radius: 4px;
              text-align: center;

              img {
                width: 84px;
                height: 78px;
                margin-bottom: 10px;
              }
              h4 {
                font-size: 14px;
                color: #666;
                line-height: 16px;
                font-weight: normal;
              }
            }
            .btns {
              height: 40px;
              line-height: 40px;
              text-align: center;
              background-color: #fff;
              .el-button {
                background-color: #fff;
                font-size: 14px;
                line-height: 19px;
              }
              .add {
                color: #5f84ff;
              }
              .remove {
                color: #ff5a5a;
                margin-left: 10px;
              }
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0 20px 40px;
    text-align: center;
    .el-button {
      width: 80px;
      height: 36px;
      color: #fff;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      border: 0;
    }
  }
}
//选择商品(内层dialog)
::v-deep .inner-dialog {
  border-radius: 10px;
  position: relative;
  .jt {
    position: absolute;
    top: 50%;
    width: 50px;
    height: 50px;
    text-align: center;
    line-height: 50px;
    font-size: 50px;
  }
  .left-jt {
    left: 0;
  }
  .right-jt {
    right: 0;
  }
  .el-dialog__title {
    line-height: 22px;
    font-size: 16px;
    font-weight: 600;
  }
  .el-dialog__body {
    padding: 20px 20px 30px;
    .add-drink-dialog-wrapper {
      width: 750px;
      margin: 0 auto;
      .demo-form-inline {
        background-color: #fff;
        height: 36px;
        display: flex;
        align-items: center;
        margin-bottom: 37px;
        .el-form-item {
          padding-left: 15px;
          margin-top: 22px;
          .el-input__inner {
            width: 314px;
            padding: 0 30px 0 15px;
            height: 36px;
          }
        }
        .el-form-item:nth-child(2) {
          padding-left: 0;
        }
        .el-button {
          height: 36px;
          width: 80px;
          border-radius: 5px;
        }
      }
      .add-drinkList {
        display: flex;
        flex-wrap: wrap;
        .add-drink-item {
          width: 20%;
          height: 134px;
          padding: 0 10px;
          margin-bottom: 20px;
          .drink-content {
            position: relative;
            height: 100%;
            background-color: #f6f7fb;
            box-shadow: 0 2px 4px 0 rgb(0 0 0 / 6%);
            border-radius: 4px;
            text-align: center;
            .drinkTrue {
              position: absolute;
              // display: none;
              top: 0;
              left: 0;
            }
            .pic {
              padding-top: 16px;
              text-align: center;
              margin-bottom: 5px;
              img {
                width: 83px;
                height: 84px;
              }
            }
            h4 {
              font-size: 14px;
              line-height: 16px;
              color: #666;
              font-weight: normal;
            }
          }
        }
      }
    }
  }
  .el-dialog__footer {
    padding: 0 20px 40px;
    text-align: center;
    .el-button {
      width: 80px;
      height: 36px;
      color: #fff;
      background: linear-gradient(135deg, #ff9743, #ff5e20) !important;
      border: 0;
    }
  }
  .zn-dialogBox {
    width: 750px;
    margin: 0 auto;
    .tips {
      font-size: 14px;
      line-height: 16px;
      color: #666;
      margin-bottom: 16px;
    }
  }
}
</style>
